import { useState } from 'react'


function UseStatePage() {

  /**
   * 简单类型
   */
  let str = 'test'
  const handleUpdate = () => {
    str += '~'
    console.log('更新后的str：', str)
  }

  const [ msg, setMsg ] = useState('test')
  const handleUpdate2 = () => {
    setMsg(msg + '~')
    console.log('更新后的state：', msg) // 总是慢一拍！！！
  }

  /**
   * 数组
   */
  const [ arr, setArr ] = useState([ '北京', '上海', '广州', '深圳' ])
  const [ arrAge, setArrAge ] = useState([ 8, 9, 2, 4 ])
  const handleUpdate3 = () => {
    arr.push('杭州') // 操作原数组都是无效的。
    setArr(arr)
    console.log('arr:', arr)
  }
  const handleUpdate4 = () => {
    // setArr([...arr,'杭州'])
    setArr([ '重庆', ...arr, '杭州' ]) // 前、后添加元素。
    console.log('arr:', arr)
  }

  const handleUpdate5 = () => {
    setArr(arr.filter(v => v != '北京')) // 前、后添加元素。
    console.log('arr:', arr)
  }
  const handleUpdate6 = () => {
    setArr(arr.map(v => v == '北京' ? '成都' : v))
    console.log('arr:', arr)
  }
  const handleUpdate7 = () => {
    const index = 2 // 在2上插入一个元素
    setArr([ ...arr.slice(0, index), '合肥', ...arr.slice(index) ])
    console.log('arr:', arr)
  }
  const handleUpdate8 = () => {
    const tempArr = [ ...arr ]
    setArr(tempArr.reverse())
    console.log('arr:', arr)
  }
  const handleUpdate9 = () => {
    const tempArr = [ ...arrAge ]
    setArrAge(tempArr.sort((a, b) => b - a))
    console.log('arr:', arrAge)
  }

  /**
   * 对象
   */
  const [ obj, setObj ] = useState({
    name: '张三',
    age: 18
  })
  const [ userInfo, setUserInfo ] = useState(() => {
    /**
     * 回调函数
     * 1. 添加处理逻辑
     * 2. 一定要有返回值
     * 3. 这个函数只会在初始化的时候，执行一次；
     */
    const date = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
    return {
      date,
      name: '赵武',
      age: 19
    }
  })
  const updateObj = () => {
    setObj({
      name: '李四'
    })
    console.log('obj:', obj)
  }
  const updateUserInfo = () => {
    setUserInfo({
      name: '王六'
    })
    console.log('userInfo:', userInfo)
  }
  const updateUserInfo2 = () => {
    // 方式1：
    setUserInfo({
      ...userInfo,
      name: '王六'
    })
    // 方式2
    // setUserInfo(Object.assign({}, userInfo, {age:20}))
    console.log('userInfo:', userInfo)
  }
  const updateUserInfo3 = () => {
    // 方式2
    setUserInfo(Object.assign({}, userInfo, { age: 20 }))
    console.log('userInfo:', userInfo)
  }

  /**
   * 更新机制
   */

  const [ count, setCount ] = useState(0)
  console.log('组件重新渲染了~',count)
  const handleAddNum = () => {
    /**
     * 1.set是一个异步方法。
     * 2. 异步设计是为了性能优化；
     * 3. 调用set函数，会触发组件的重新渲染
     */
    setCount(1)
    setCount(2)
    setCount(3)
    setCount(4)
    // ......
    console.log('更新后的count：', count)
  }
  const handleAddNum2 = () => {
    /**
     * 1.set是一个异步方法。
     * 2. 异步设计是为了性能优化；
     * 3. 调用set函数，会触发组件的重新渲染
     */
    // setCount(count + 1)
    // setCount(count + 1)
    // setCount(count + 1)
    setCount((prev)=> prev + 1) // 1
    setCount((prev)=> prev + 1) // 2
    setCount((prev)=> prev + 1) // 3
    setCount((prev)=> prev + 1) // 4
    // ......
    console.log('更新后的count：', count)
  }
  return (
    <>
      <h2>简单类型：</h2>
      <div>变量更新str: { str }</div>

      <div>
        <button onClick={ handleUpdate }>更新str</button>
      </div>
      <hr/>
      <div>使用state基本类型：msg: { msg }</div>
      <div>
        <button onClick={ handleUpdate2 }>更新msg(使用state)</button>
      </div>
      <hr/>
      <h2>数组</h2>
      <div>arr: { arr }</div>
      <div>arrAge: { arrAge }</div>
      <div>
        <button onClick={ handleUpdate3 }>更新arr(使用state-push)</button>
        <br/>
        <button onClick={ handleUpdate4 }>更新arr（前、后分别add）</button>
        <br/>
        <button onClick={ handleUpdate5 }>更新arr（delete）</button>
        <br/>
        <button onClick={ handleUpdate6 }>更新arr（替换某一项）</button>
        <br/>
        <button onClick={ handleUpdate7 }>更新arr（中间add）</button>
        <br/>
        <button onClick={ handleUpdate8 }>更新arr（reverse）</button>
        <br/>
        <button onClick={ handleUpdate9 }>更新arr-number（sort）</button>
        <br/>
      </div>
      <hr/>
      <h2>对象</h2>
      <div>
        <div>name： { obj.name }，age：{ obj.age }</div>
        <div>
          <button onClick={ updateObj }>更新obj</button>
          <br/>
        </div>

        <div>用户名： { userInfo.name }，用户age：{ userInfo.age }，日期：{ userInfo.date }</div>
        <div>
          <button onClick={ updateUserInfo }>更新 userInfo（丢属性）</button>
          <button onClick={ updateUserInfo2 }>更新 userInfo（name）</button>
          <button onClick={ updateUserInfo3 }>更新 userInfo（age）</button>
          <br/>
        </div>
      </div>
      <h2>更新机制</h2>
      <div>
        count： { count }
        <div>
          <button onClick={ handleAddNum }>更新count</button>
          <button onClick={ handleAddNum2 }>更新count 2</button>
        </div>
      </div>
    </>
  )
}

export default UseStatePage
